<template>
  <div class="app-container" >
    <panel-group :pdata="pdata" />

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="Id" show-overflow-tooltip prop="id">
      </el-table-column>

      <el-table-column align="center" label="发生时间" show-overflow-tooltip prop="createTime">
      </el-table-column>

      <el-table-column align="center" label="收支类型" show-overflow-tooltip prop="remark">
      </el-table-column>

      <el-table-column align="center" label="E豆数量" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.displayValue}}</span>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <div style="margin-top: 50px; text-align: center;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="page.limit"
        @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import PanelGroup from '@/components/PanelGroup'
  export default {
    name: "account",
    components: {
      PanelGroup
    },
    data(){
      return{
        form:null,
        pdata:{
          date: true,
        },
        list: [],
        listLoading:false,
        total: 0,
        page: {
          pageNo: 1,
          limit: 20
        }
      }
    },
    methods:{
      currentChange (el) {
        this.page.pageNo = el
        this.getListData()
      },
      getListData () {
        this.$fetch(this.$api.ebeanList, this.page).then(res => {
          console.log(res)
          this.list = res.page.records
          this.total = res.page.total
        })
      }
    },
    created () {
      this.getListData()
    }
  }
</script>

<style scoped>

</style>


